<template>
    <div class="All-dance-list">   
                <!-- 加载模块 -->
                <div class="loading" >
                </div>
                <!-- 所有查询结果模块 -->
                <ul class="loading-dance-list">
                    <!-- 单项数据模块 -->
                    <li class="dance-item" v-for="DanceL in props.GeneralData" :key="DanceL.id" @click="gotoVideo">
                        <div class="listItem" >
                            <img class="itemImg" :src="DanceL.cover[0]" />
                            <img
                            class="itemImgPlay"
                            src="//rs.dance365.com/img/release_play@3x.fb313c4d.png"
                            />
                            <div class="masking"></div>
                            <div class="itemText">
                            <p class="itemName">
                                <i class="ItemNameIcon"></i
                                ><span class="itemNameTitle">{{DanceL.title}}</span>
                            </p>
                            <div class="look">
                                <p class="lookNum">{{DanceL.statisticsBackup.viewCount}}人浏览</p>
                                <div class="lookTodo">
                                <p >
                                    <el-icon :size="14"><Pointer /></el-icon
                                    ><span style="font-size:14px;display: inline-block;margin-left: 2px;">{{DanceL.statisticsBackup.praiseCount}}</span>
                                </p>
                                <p >
                                    <el-icon :size="14"><ChatDotRound /></el-icon
                                    ><span style="font-size:14px;display: inline-block;margin-left: 2px;">{{DanceL.statisticsBackup.praiseCount}}</span>
                                </p>
                                <p >
                                    <el-icon :size="14"><Star /></el-icon>
                                    <span style="font-size:14px;display: inline-block;margin-left: 2px;">{{DanceL.statisticsBackup.favoriteCount}}</span>
                                </p>
                                </div>
                            </div>
                            </div>
                            <div class="itemUp">
                            <div class="upInfo">
                                <img class="upAvatar" :src="DanceL.creatorBackup.avatar" />
                                <span>{{DanceL.creatorBackup.name}}</span>
                            </div>
                            <span class="upTime">日期</span>
                            </div>
                        </div>
                    </li>
                </ul>
    </div>
</template>

<script lang="ts">

import { defineComponent} from "vue";
import { storeToRefs } from 'pinia';

export default defineComponent({
    name: "DanceList",
});
</script>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { DefaultDanceListItemType } from "@/api/Resource";
import {Pointer,ChatDotRound,Star} from '@element-plus/icons-vue'
const router = useRouter()
//接收父组件传递过来的数据
//定义类型
const props = defineProps<{
    GeneralData:DefaultDanceListItemType[]
}>()

//跳转到视频页面
const gotoVideo =()=>{
    router.push({
        path:"/videolist"
    })
}

</script>

<style lang="scss" scoped>
    .All-dance-list{
            width: 1200px;
            min-height: 1232px;
            .loading-dance-list{
                width: 1200px;
                display: flex;
                flex-wrap: wrap;
                .dance-item{
                    width: 224px;
                    height: 288px;
                    margin-right: 20px;
                    margin-bottom: 20px;
                    background-color: #ffffff;
                    border-radius: 5px;
                    &:nth-child(5n){
                        margin-right: 0;
                    }
                    .listItem {
                        color: #111;
                        width: 224px;
                        height: 280px;
                        border-radius: 5px;
                        margin-right: 20px;
                        margin-bottom: 20px;
                        overflow: hidden;
                        position: relative;
                        .itemImg {
                            width: 224px;
                            height: 125px;
                            cursor: pointer;
                        }
                        .masking{
                            position: absolute;
                            top: 0;
                            width: 224px;
                            height: 125px;
                            background-color: #ffffff;
                            opacity: 0;
                            z-index: 3;
                            cursor: pointer;
                            &:hover{
                                opacity: .5;
                            }
                        }
                        .itemImgPlay {
                            position: absolute;
                            width: 30px;
                            height: 30px;
                            top: 90px;
                            left: 10px;
                        }
                        .itemText {
                            padding: 10px;
                            .itemName {
                            font-size: 14px;
                            line-height: 18px;
                            height: 36px;

                            margin-bottom: 10px;
                            overflow: hidden;
                            -webkit-line-clamp: 2;
                            display: -webkit-box;
                            text-overflow: ellipsis;
                            -webkit-box-orient: vertical;
                            .ItemNameIcon {
                                margin-right: 5px;
                                display: inline-block;
                                vertical-align: middle;
                                width: 24px;
                                height: 16px;
                                background: url(https://rs.dance365.com/title_original.svg)
                                no-repeat;
                            }

                            // .itemNameTitle {
                            // }
                            }
                            .look {
                            color: #b1b5c1;
                            .lookTodo {
                                display: flex;
                                margin-top: 10px;
                                p {
                                margin-right: 20px;
                                }
                            }
                            }
                            border-bottom: 1px solid #b1b5c1;
                        }
                        .itemUp {
                            margin: 10px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .upInfo {
                            display: flex;
                            align-items: center;
                            .upAvatar {
                                width: 24px;
                                height: 24px;
                                border-radius: 50%;
                            }
                            }
                        }
                    }
                }
            }
    }
</style>